<template>
	<view class="tripde">
		<view class="trip" v-if="tripdeta">
			
				<view class="cart_de">
					<text class="type">车牌</text>
					<view class="plateNo">
						<up-input
						 border="surround"
						  v-model="tripdeta.plateNo"
						  readonly
						 ></up-input>
					</view>
				</view>
				
				<view class="cart_de">
					<text class="type">行驶日期</text>
					<view class="plateNo">
					<up-input
					 border="surround"
					  v-model="tripdeta.travelDate"
					  readonly
					 ></up-input>
					 </view>
				</view>
				
				<view class="cart_de">
					<text class="type">行驶里程</text>
					<view class="plateNo">
					<up-input
					 border="surround"
					  v-model="tripdeta.travelDistance"
					  @blur="makeplate"
					 ></up-input>
					 </view>
				</view>
				
				<view class="cart_de">
					<text class="type">油量</text>
					<view class="plateNo">
					<up-input
					 border="surround"
					  v-model="tripdeta.gasFilling"
					   @blur="makegas"
					 ></up-input>
					 </view>
				</view>
				
				<view class="cart_de">
					<text class="type">金额</text>
					<view class="plateNo">
					<up-input
					 border="surround"
					  v-model="tripdeta.amount"
					   @blur="makeamount"
					 ></up-input>
					 </view>
				</view>
				
				<view class="same">
					 <up-button type="error" text="删除" @click="deletripdata"></up-button>
				</view>
				
			
		</view>

	</view>
</template>

<script setup>
import { getCurrentInstance, nextTick, onMounted, ref } from 'vue';
import {tofixtrip,deletrip} from '@/api/parkApi.js'
import {onLoad} from '@dcloudio/uni-app'

const tripdeta=ref() //里层详情	

//删除里程
const deletripdata=async()=>{
	let res = await deletrip({
		header:{
			'Authorization': uni.getStorageSync('token')
		},
		
		id:tripdeta.value.id
	})
		
	if(res.code==200){
		uni.showToast({
			title:'删除成功'
		})
		uni.navigateTo({
			url:'/pages/park/cart/consumption/consumption'
		})
	}else{
		//静态数据
		uni.showToast({
			title:'删除成功'
		})
		uni.navigateTo({
			url:'/pages/park/cart/consumption/consumption'
		})
		
	}
}

//失去焦点修改金额
const makeamount=async()=>{

  let data ={
	 amount:tripdeta.value.amount 
  }
  maketrip(data)
}

//失去焦点修改油量
const makegas=async()=>{

  let data ={
	 gasFilling:tripdeta.value.gasFilling 
  }
  maketrip(data)
}

//失去焦点修改行驶里层
const makeplate=async()=>{

  let data ={
	 travelDistance:tripdeta.value.travelDistance 
  }
  maketrip(data)
}
//修改里层信息
const maketrip=async(data)=>{
	
	let res = await tofixtrip({
		header:{
			'Authorization': uni.getStorageSync('token')
		},
		data:{
		id:tripdeta.value.id,
		...data
		}
	})
	if(res.code==200){
		uni.showToast({
			title:'修改成功'
		})
		tripdeta.value={...tripdeta.value,...data}
		
		uni.navigateTo({
			url:'/pages/park/cart/consumption/consumption'
		})
		
	}else{
		//静态数据
		uni.showToast({
			title:'修改成功'
		})
		tripdeta.value={...tripdeta.value,...data}
		
		uni.navigateTo({
			url:'/pages/park/cart/consumption/consumption'
		})
		
	}
	console.log(tripdeta.value);
}

onLoad((option)=>{
	let res = option.trip
	tripdeta.value = JSON.parse(res)
})


//获取里层详情
// const gettride=()=>{	
// 	let res = getCurrentInstance().attrs.trip
// 	tripdeta.value = JSON.parse(res)
	
// 	console.log(tripdeta.value);
// }	

// onMounted(()=>{
// 	   gettride()
	
// })	
	
</script>
<style lang="scss">
::v-deep uni-page-wrapper{
	background-color: #d8eff5;
}
.tripde{
	padding: 8px;

	
	.trip{
		display: flex;
		flex-direction: column;
		font-weight: 600;
		font-size: 18px;
		color: #555555;
		padding: 8px;
		margin: 4px;

	  .cart_de{
	  	  display: flex;
	  	  align-items: center;
	  	  padding: 6px;
	  	  margin-bottom: 10px;
	  	  
	  	  .type{
	  		  flex: 1;
	  		  font-size: 18px;
	  		  font-weight: 700;
			  text-align-last: justify;
			  margin-right: 8px;
	  	  }
	  	  .plateNo{
	  		  flex: 3;
	  	  }
	  	 
	  }
	  .same{
	  		  margin: 12px 0px;
	  }
	}
	
}
</style>
